<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <link rel="icon" href="/favicon.ico"/>
    <title>Jcx-Ui</title>
    <style>
        .app-loading {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background: #fff;
        }

        .app-loading-logo {
            margin-bottom: 30px;
        }

        .app-loading-logo img {
            width: 90px;
            vertical-align: bottom;
        }

        .app-loading-loader {
            box-sizing: border-box;
            width: 35px;
            height: 35px;
            border: 5px solid transparent;
            border-top-color: #000;
            border-radius: 50%;
            animation: 0.5s loader linear infinite;
            position: relative;
        }

        .app-loading-loader:before {
            box-sizing: border-box;
            content: '';
            display: block;
            width: inherit;
            height: inherit;
            position: absolute;
            top: -5px;
            left: -5px;
            border: 5px solid #ccc;
            border-radius: 50%;
            opacity: 0.5;
        }

        .app-loading-title {
            font-size: 24px;
            color: #333;
            margin-top: 30px;
        }

        .dark .app-loading {
            background: #222225;
        }

        .dark .app-loading-loader {
            border-top-color: #fff;
        }

        .dark .app-loading-title {
            color: #d0d0d0;
        }

        @keyframes loader {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>

<noscript>
    <strong>
        We're sorry but Jcx-Ui doesn't work properly without JavaScript enabled. Please enable it to continue.
    </strong>
</noscript>

<div id="app" class="main-ui">
    <div class="app-loading">
        <div class="app-loading-logo">
            <img src="/logo.svg" alt="logo"/>
        </div>
        <div class="app-loading-loader"></div>
        <div class="app-loading-title">银杏叶（UI）</div>
    </div>
</div>

<div id="versionCheck"
     style="display: none; position: absolute; z-index: 99; top: 0; left: 0; right: 0; bottom: 0; padding: 40px; background: rgba(255, 255, 255, 0.9); color: #333;">
    <h2 style="line-height: 1; margin: 0; font-size: 24px">当前使用的浏览器内核版本过低 :(</h2>
    <p style="line-height: 1; font-size: 14px; margin: 20px 0 0;opacity: 0.8">
        当前版本：<span id="versionCheck-type">--</span> <span id="versionCheck-version">--</span>
    </p>
    <p style="line-height: 1; font-size: 14px; margin: 10px 0 0;opacity: 0.8">
        最低版本要求：Chrome 71+、Firefox 65+、Safari 12+、Edge 97+。
    </p>
    <p style="line-height: 1; font-size: 14px; margin: 10px 0 0;opacity: 0.8">
        请升级浏览器版本，或更换现代浏览器，如果你使用的是双核浏览器,请切换到极速/高速模式。
    </p>
</div>

<script type="text/javascript">
    function getBrowserInfo() {
        const userAgent = window.navigator.userAgent;
        const browserInfo = {
            type: 'unknown',
            version: 'unknown',
            userAgent: userAgent
        };
        if (document.documentMode) {
            browserInfo.type = 'IE';
            browserInfo.version = document.documentMode + '';
        } else if (indexOf(userAgent, 'Firefox')) {
            browserInfo.type = 'Firefox';
            browserInfo.version = userAgent.match(/Firefox\/([\d.]+)/)[1];
        } else if (indexOf(userAgent, 'Opera')) {
            browserInfo.type = 'Opera';
            browserInfo.version = userAgent.match(/Opera\/([\d.]+)/)[1];
        } else if (indexOf(userAgent, 'Edg')) {
            browserInfo.type = 'Edg';
            browserInfo.version = userAgent.match(/Edg\/([\d.]+)/)[1];
        } else if (indexOf(userAgent, 'Chrome')) {
            browserInfo.type = 'Chrome';
            browserInfo.version = userAgent.match(/Chrome\/([\d.]+)/)[1];
        } else if (indexOf(userAgent, 'Safari')) {
            browserInfo.type = 'Safari';
            browserInfo.version = userAgent.match(/Safari\/([\d.]+)/)[1];
        }
        return browserInfo;
    }

    function indexOf(userAgent, browser) {
        return userAgent.indexOf(browser) > -1;
    }

    function isSatisfyBrowser() {
        const minVer = {
            Chrome: 71,
            Firefox: 65,
            Safari: 12,
            Edg: 97,
            IE: 999
        };
        const browserInfo = getBrowserInfo();
        const materVer = browserInfo.version.split('.')[0];
        return materVer >= minVer[browserInfo.type];
    }

    if (!isSatisfyBrowser()) {
        document.getElementById('versionCheck').style.display = 'block';
        document.getElementById('versionCheck-type').innerHTML = getBrowserInfo().type;
        document.getElementById('versionCheck-version').innerHTML = getBrowserInfo().version;
    }
</script>
<script type="module" src="/src/main.js"></script>

</body>
</html>
